<template>
  <device-common :action-show="true" :trend-show="false">
    <template slot="state">
      <el-card>
        <div slot="header" class="clearfix flex">
          <b>实时状态</b>
          <span class="text">状态更新时间：{{ states.datatime }}</span>
        </div>
        <div class="state-container">
          <dl v-for="(item,index) in rtuPortDisplays" :key="index">
            <dt v-if="item.namekey.indexOf('Alarm') > -1" :class="getState(item).class">{{ getState(item).name }}</dt>
            <dt v-else>{{ getState(item) }}<em>{{ item.unit }}</em></dt>
            <dd class="iconfont" :class="item.iconfont" />
            <dd class="name">{{ item.name }}</dd>
          </dl>
        </div>
      </el-card>
      <div class="h12" />
    </template>
    <template slot="action">
      <el-card>
        <div slot="header" class="clearfix flex" style="align-items:center;">
          <b>设备控制</b>
          <el-tooltip class="item" effect="dark" content="右侧按钮高亮时模式则为当前控制模式" placement="top-start">
            <i class="el-icon-info" style="font-size:18px;margin-left:8px;color:#F56C6C;" />
          </el-tooltip>
          <el-button-group style="margin-left:32px;">
            <el-button :type="+states.ManualStatus === 1?'primary':'default'" @click="sendCommand(1)">设置为手动模式</el-button>
            <el-button :type="+states.AutoStatus === 1?'primary':'default'" @click="sendCommand(2)">设置为自动模式</el-button>
            <el-button :type="+states.StopStatus === 1?'primary':'default'" @click="sendCommand(3)">设置为停机模式</el-button>
          </el-button-group>
          <el-button type="primary" style="margin-left:32px;" plain @click="sendCommand(7)">复位报警</el-button>
        </div>
        <div class="action-container">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="手动模式" name="first">
              <el-button type="success" plain size="medium" @click="sendCommand(4)">启动发电机</el-button>
            </el-tab-pane>
            <el-tab-pane label="自动模式" name="second">
              <el-button type="success" plain size="medium" @click="sendCommand(5)">遥控启动</el-button>
              <el-button type="danger" plain size="medium" @click="sendCommand(6)">遥控停止</el-button>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
    </template>
  </device-common>
</template>

<script>
import DeviceCommon from '@/components/Device/common'
import { mapGetters } from 'vuex'
import { getDeviceState } from '@/utils/device'
import { sendCommand } from '@/api/device'
import { dclassCodeMap } from '@/utils/constant'
export default {
  components: {
    DeviceCommon
  },
  props: {
    rtuSerialno: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      rtuPortDisplays: [],
      states: {},
      activeName: 'first',
      dclassCodeMap
    }
  },
  computed: {
    ...mapGetters(['currentDevice', 'devicesObj'])
  },
  watch: {
    currentDevice: {
      handler(newVal, oldVal) {
        if (newVal.devices && newVal.devices.length > 0) {
          this.rtuPortDisplays = newVal.devices.filter(val => {
            return +val.product_type === dclassCodeMap.fdj
          })[0].rtuPortDisplays
        } else {
          this.rtuPortDisplays = newVal.rtuPortDisplays
        }
      },
      deep: true,
      immediate: true
    },
    devicesObj: {
      handler(newVal, oldVal) {
        const serialno = this.rtuSerialno || this.currentDevice.serialno
        this.states = newVal[serialno].states || {}
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getState(item) {
      const rtu_serialno = item.rtu_serialno || item.serialno
      const states = this.devicesObj[rtu_serialno].states
      if (item.namekey.indexOf('Alarm') > -1) {
        const value = (+states[item.namekey]).toString(2).padStart(16, 0)
        const res = this.createArr(value, 0, 4, 4)
        const alarms = ['0010', '0011', '0100']
        const alarm = alarms.includes(res[0]) || alarms.includes(res[1]) || alarms.includes(res[2]) || alarms.includes(res[3])
        return alarm ? { name: '报警', class: 'danger' } : { name: '正常', class: 'success' }
      } else {
        return getDeviceState(states[item.namekey], item, states)
      }
    },
    createArr(str, start, end, unit) {
      const arr = [] // 保存每次截取后的字符串
      const counts = Math.ceil(str.length / unit) // 循环截取的次数,向上取整
      for (let i = 0; i < counts; i++) {
        const newStr = str.substring(start, end)
        arr.push(newStr)
        start = end
        end += unit
      }
      return arr
    },
    sendCommand(num) {
      this.$confirm('确定要进行此操作吗？', '操作确认', { type: 'warning' }).then(() => {
        const pararmsMap = {
          1: 2339796105,
          2: 2339730570,
          3: 2339665035,
          4: 2339992710,
          5: 2341762155,
          6: 2341827690,
          7: 2341893225
        }
        const data = {
          namekey: 'GenCmd',
          value: pararmsMap[num]
        }
        this._sendCommand(data)
      })
    },
    async _sendCommand(data) {
      const serialno = this.rtuSerialno || this.currentDevice.serialno
      const res = await sendCommand(data, serialno)
      if (res.errorCode === 0) {
        this.$message({ type: 'success', message: res.msg, showClose: true })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.text{
  margin-left:auto;
}
.state-container{
  display:flex;
  flex-wrap: wrap;
  margin-top: -20px;
  padding: 12px 0;
  dl{
    display:flex;
    width:10%;
    flex-direction:column;
    margin-top:32px;
    text-align:center;
    color:#666;
    dt{
      font-weight:bold;
      font-size:18px;
      color:#333;
      &.success{
        color:#67C23A
      }
      &.danger{
        color:#F56C6C
      }
      em{
        font-style:normal;
        font-size:18px;
        padding-left:4px;
      }
    }
    dd{
      &.iconfont{
        font-size: 18px;
        margin-top: 12px;
      }
      &.name{
        font-size: 12px;
        margin-top: 14px;
      }
    }
  }
}
</style>
